Bootstrap 5 — Modals

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add modals with JavaScript with Bootstrap 5.

Modal

Modals are popups that show notification and other content.

It’s placed over everything else in the document and remove scroll from the body.

Clicking on the backdrop will automatically close the modal.

Bootstrap 5 only supports one modal window at a time.

Modals use position: fixed .

The autofocus attribute has no effect in Bootstrap modals.

We can achieve the same effect with JavaScript code by focusing elements when the show.bs.modal event is emitted:

const myModal = document.getElementById('myModal');
const myInput = document.getElementById('myInput');

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Modal Components

We can add a modal by adding a few classes to our container elements:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal'>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We add a button to open the modal.

The button has the data-toggle attribute to open the modal with the given selector.

Then in our modal, we have the same ID as the data-toggle value.

Then we have our modal content.

It includes the modal-dialog class to define the modal.

modal-content contains the content.

modal-header has the header.

modal-title has the title.

modal-body has the body.

modal-footer has the footer.

Static Backdrop

The backdrop can be set to static so that it won’t close when we click outside it.

For example, we can write:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We just add the data-backdrop='static' attribute to disable closing when clicking outside.

Scrolling Long Content

When we have long content, then the scrolling depends on the modal instead of the page:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.
        </p>
        <p>
          Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Since we have long content, the scroll bar will scroll the modal instead of the page.

Conclusion

We can add modals to display what we want.

The backdrop can close or modal and that can be disabled.